<template>
  <div style="padding: 10px">
    <el-container>
      <el-header>
        <div>
          <div style="display: inline-block">
            <el-button @click="goBack" icon="el-icon-back" size="small" type="text">返回</el-button>
          </div>
          <div style="display: inline-block">|</div>
          <div style="display: inline-block;">
            <div style="padding-bottom: 15px;margin-left:10px">
              <span style=" font-family: 'Microsoft YaHei',serif;display: inline-block">编辑</span>
            </div>
          </div>
          <div style="border-bottom: solid 1px #C9C9C9;"></div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">

          <el-scrollbar style="height:100%">

            <MenuItem :item="item" :key="index" :reorder="false" @change-selection="refreshList"
                      v-for="(item, index) in items"></MenuItem>
          </el-scrollbar>
        </el-aside>
        <el-main style="height: 540px">
          <div>
            <a name="术语正名"></a>
            <div><span>术语正名</span></div>
            <div style="margin-top: 10px; width: 255px">
              <KindEditor :content.sync="name" editor-type="Input"></KindEditor>
            </div>
          </div>
          <div style="margin-bottom: 10px;margin-top: 10px ">
            <a name="英文名称"></a>
            <div><span>英文名称</span></div>
            <div style="margin-top: 10px">
              <MultiValueBox :fieldValue.sync="englishName" />
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <a name="英文简称"></a>
            <div><span>英文简称</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="englishAbbr" />
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <a name="日文"></a>
            <div><span>日文</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="japaneseName" />
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <a name="法文"></a>
            <div><span>法文</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="frenchName" />
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <a name="俄文"></a>
            <div><span>俄文</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="russianName" />
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <a name="德文"></a>
            <div><span>德文</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="germanName" />
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <a name="同义词"></a>
            <div><span>同义词</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="synonym" />
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <a name="英文同义词"></a>
            <div><span>英文同义词</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="englishNameSynonym" />
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <a name="英文缩写同义词"></a>
            <div><span>英文缩写同义词</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="englishAbbrSynonym" />
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <a name="日文同义词"></a>
            <div><span>日文同义词</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="japaneseNameSynonym" />
            </div>
          </div>

          <div style="margin-bottom: 10px;">
            <a name="法文同义词"></a>
            <div><span>法文同义词</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="frenchNameSynonym" />
            </div>
          </div>


          <div style="margin-bottom: 10px;">
            <a name="俄文同义词"></a>
            <div>
              <span>俄文同义词</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="russianNameSynonym" />
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <a name="德文同义词"></a>
            <div><span>德文同义词</span></div>
            <div style="margin-top: 10px;">
              <MultiValueBox :fieldValue.sync="germanNameSynonym" />
            </div>
          </div>
          <div>
            <div>
              <span>释义</span>
            </div>
            <div>
              <div :idx="index" v-for="(pa, index) in paraphrase">
                <div style="display: inline-block;width: 500px">
                  <KindEditor :content.sync="paraphrase[index]" editor-type="Textarea"></KindEditor>
                </div>
                <div style="display: inline-block; vertical-align: top; ">
                  <el-button @click="paraphrase.splice(index, 1)" circle icon="el-icon-minus" plain type="danger"
                             v-if="paraphrase.length > 1"></el-button>
                  <el-button @click="paraphrase.push('')" circle icon="el-icon-plus" plain type="success"
                             v-if="index === paraphrase.length - 1"></el-button>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div>
              <span>术语来源</span>
            </div>
            <div>
              <span v-html="nameSource"></span>
            </div>
          </div>

        </el-main>
      </el-container>
      <el-footer>
        <div style="border-top: solid 1px #C9C9C9; position: relative">
          <div style="float: right">
            <el-button @click="cancelEdit" size="small">取 消</el-button>
            <el-button @click="commit()" size="small" type="success">
              保存
            </el-button>
          </div>
        </div>
      </el-footer>
    </el-container>

  </div>
</template>

<script>
import MenuItem from "../common/MenuItem";
import MultiValueBox from "../knowledge/knowledgeEdit/MultiValueBox"
import KindEditor from "../kindeditor/KindEditor"

export default {
  name: "TermBetweenEdit",
  components: {
    MenuItem,
    MultiValueBox,
    KindEditor
  },
  data() {
    return {
      items: [
        {
          id: '1',
          name: "术语正名",
          selected: true,
        },
        {
          id: '2',
          name: "英文名称",
          selected: false,
        },
        {
          id: '3',
          name: "英文简称",
          selected: false,
        },
        {
          id: '4',
          name: "日文",
          selected: false,
        },
        {
            id: '5',
            name: "法文",
            selected: false,
          },
        {
          id: '6',
          name: "俄文",
          selected: false,
        },
        {
          id: '7',
          name: "德文",
          selected: false,
        },
        {
          id: '8',
          name: "同义词",
          selected: false,
        },
        {
          id: '9',
          name: "英文同义词",
          selected: false,
        },
        {
          id: '10',
          name: "英文缩写同义词",
          selected: false,
        },
        {
          id: '11',
          name: "日文同义词",
          selected: false,
        },
        {
          id: '12',
          name: "法文同义词",
          selected: false,
        },
        {
          id: '13',
          name: "俄文同义词",
          selected: false,
        },
        {
          id: '14',
          name: "德文同义词",
          selected: false,
        },
        {
          id: '15',
          name: "释义",
          selected: false,
        },
        {
          id: '16',
          name: "术语来源",
          selected: false,
        }
      ],
      editId: '',
      name: '',
      englishName: [],
      englishAbbr: [],
      japaneseName: [],
      japaneseNameSynonym: [],
      frenchName: [],
      frenchNameSynonym: [],
      russianName: [],
      russianNameSynonym: [],
      germanName: [],
      germanNameSynonym: [],
      paraphrase: [],
      synonym: [],
      englishNameSynonym: [],
      englishAbbrSynonym: [],
      nameSource: ''
    }
    },
    methods: {
      cancelEdit() {
        this.$router.go(-1)
      },
      goBack() {
        this.$router.go(-1)
      },
      commit() {
        if (!this.name) {
          this.$message.warning("请填写正名")
          return;
        }
        // 向后台推送数据
        let param = new URLSearchParams();
        if (this.editId) {
          param.append("id", this.editId)
          param.append("termBookMetadataId", this.$route.query.termBookMetadataId)
        }
        param.append("name", this.name)
        param.append("englishName", JSON.stringify(this.englishName))
        param.append("englishAbbr", JSON.stringify(this.englishAbbr))
        param.append("japaneseName", JSON.stringify(this.japaneseName))
        param.append("japaneseNameSynonym", JSON.stringify(this.japaneseNameSynonym))
        param.append("frenchName", JSON.stringify(this.frenchName))
        param.append("frenchNameSynonym", JSON.stringify(this.frenchNameSynonym))
        param.append("russianName", JSON.stringify(this.russianName))
        param.append("russianNameSynonym", JSON.stringify(this.russianNameSynonym))
        param.append("germanName", JSON.stringify(this.germanName))
        param.append("germanNameSynonym", JSON.stringify(this.germanNameSynonym))
        param.append("paraphrase", JSON.stringify(this.paraphrase))
        param.append("synonym", JSON.stringify(this.synonym))
        param.append("englishNameSynonym", JSON.stringify(this.englishNameSynonym))
        param.append("englishAbbrSynonym", JSON.stringify(this.englishAbbrSynonym))
        this.axios.post('/pmph/action/term/termBetweenCommit', param)
          .then((res) => {
            this.response = res
            this.$router.go(-1)
          })
      },
      refreshList(item) {
        window.location.href = '#' + item.name;
        this.setAllItemsUnselected();
        this.setSelectedItem(item)
      },
      setAllItemsUnselected() {
        this.items.forEach(item => {
          item.selected = false;
        });
      },
      setSelectedItem(selectedItem) {
        this.items.forEach(item => {
          if (item.id === selectedItem.id) {
            item.selected = true;
          }
        });
      },
    },
    created() {
      this.editId = this.$route.query.id;
      if (this.$route.query.id) {
        this.axios.get("/pmph/action/term/selectTermBetweenEditById", {
          params: {
            id: this.$route.query.id,
          }
        })
          .then((res) => {
            this.editId = res.data.id
            this.name = res.data.name
            this.synonym = JSON.parse(res.data.synonym);
            this.englishNameSynonym = JSON.parse(res.data.englishNameSynonym);
            this.englishName = JSON.parse(res.data.englishName);
            this.englishAbbr = JSON.parse(res.data.englishAbbr);
            this.japaneseName = JSON.parse(res.data.japaneseName);
            this.japaneseNameSynonym = JSON.parse(res.data.japaneseNameSynonym);
            this.frenchName = JSON.parse(res.data.frenchName);
            this.frenchNameSynonym = JSON.parse(res.data.frenchNameSynonym);
            this.russianName = JSON.parse(res.data.russianName);
            this.russianNameSynonym = JSON.parse(res.data.russianNameSynonym);
            this.germanName = JSON.parse(res.data.germanName);
            this.germanNameSynonym = JSON.parse(res.data.germanNameSynonym);
            this.englishAbbrSynonym = JSON.parse(res.data.englishAbbrSynonym);
            this.paraphrase = res.data.paraphrase;
            this.nameSource = res.data.nameSource;
          })
      }
    }
  }
</script>

<style scoped>

</style>
